<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格生成.html</title>
    <script src="js/jquery-3.6.3.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            text-decoration: none;
        }

        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        table {
            border-collapse: collapse;
        }

        th {
            background-color: aquamarine;
            border: 1px solid darkgray;
        }
        .delete{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div>
    <button id="getDate">获取数据</button>
    <table>
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</div>
</body>
<script>
    $(function () {
        let data = [{
            name: '张dsafsafasdfsdaf三',
            sex: '男',
            age: '25'
        }, {
            name: '李四',
            sex: '女',
            age: '36'
        }, {
            name: '王五',
            sex: '女',
            age: '15'
        }, {
            name: '赵六',
            sex: '男',
            age: '24'
        },]

        let list = []
        $('#getDate').click(function () {
            for (let i = 0; i < data.length; i++) {
                let $str = $('<tr><td>'+ data[i]['name'] +'</td>><td>'+ data[i]['sex'] +'</td><td>'+ data[i]['age'] +'</td><td class="delete">'+ '<button>删除</button>' +'</td></tr>')
                $('#tbody').append($str)
            }
            $('.delete').click(function (){
                $(this).parent().remove()
            })
        })
    })


</script>
</html>